﻿<div class="row" id="repair">

	<div class="col-lg-12">
		<br>
		<div class="panel panel-default">
			<div class="panel-heading">车点</div>
			<!-- /.panel-heading -->
			<div class="panel-body">
				<div id="dataTables-example_wrapper"
					class="dataTables_wrapper form-inline dt-bootstrap no-footer">
					
					<div class="row">
						<div class="col-sm-12">
							<div id="dataTables-example_filter" class="dataTables_filter">
								<label> 名称:
									<input type="text" v-model.trim.lazy="queryCondition.stationName"
										class="form-control input-sm"
										aria-controls="dataTables-example">
								</label> 
								<label> 地址:
									<input type="text" v-model.trim.lazy="queryCondition.address"
									class="form-control input-sm"
									aria-controls="dataTables-example">
								</label>
								<button type="button" class="btn btn-primary" @click="goPage(1)">查询</button>
							</div>
						</div>
					</div>
					
					<div class="row">
						<div class="col-sm-12">
							<table width="100%"
								class="table table-striped table-bordered table-hover dataTable no-footer dtr-inline"
								role="grid" aria-describedby="dataTables-example_info"
								style="width: 100%;">
								<thead>
									<tr role="row">
										<th>编号</th>
										<th>名称</th>
										<th>地址</th>
										<th>车桩数量</th>
										<th></th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="(item,index) in list"
										:class="{gradeA:true,even:index%2==0,odd:index%2==1}"
										role="row">
										<td>{{item.stationCode}}</td>
										<td>{{item.stationName}}</td>
										<td>{{item.address}}</td>
										<td>{{item.bicyclePileNum}}</td>
										<td>
											<button type="button" class="btn btn-primary" @click="listPile(item.stationId,1)"
												data-toggle="modal" data-target="#pileModal"
											>详情</button>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-4">
							<div class="dataTables_info" id="dataTables-example_info"
								role="status" aria-live="polite">
								每页显示{{pageInfo.pageSize}}条，共{{pageInfo.total}}条
							</div>
						</div>
						<div class="col-sm-8">
							<div class="dataTables_paginate paging_simple_numbers"
								id="dataTables-example_paginate">
								<ul class="pagination">
									<li
										:class="{paginate_button:true, previous:true, disabled:pageInfo.isFirstPage}"
										aria-controls="dataTables-example" tabindex="0"
										id="dataTables-example_previous">
										<a href="javascript:void(0)" @click="goPage(pageInfo.pageNum-1)">上一页</a>
									</li>

									<li v-for="item in pageInfo.navigatepageNums"
										:class="{paginate_button:true, active:item==pageInfo.pageNum}"
										aria-controls="dataTables-example" tabindex="0">
										<a href="javascript:void(0)" @click="goPage(item)">{{item}}</a>
									</li>
									<li
										:class="{paginate_button:true, next:true, disabled:pageInfo.isLastPage}"
										aria-controls="dataTables-example" tabindex="0"
										id="dataTables-example_next">
										<a href="javascript:void(0)" @click="goPage(pageInfo.pageNum+1)">下一页</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 详情弹出层 -->
	<div class="modal fade" id="pileModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
	     <div class="modal-dialog" style="width:60%">
	         <div class="modal-content">
	             <div class="modal-header">
	                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
	                 <h4 class="modal-title" id="myModalLabel">详情</h4>
	             </div>
	             <div class="modal-body">
		
					<div v-show="status!=1" 
						:class="{alert:true,'alert-success':status==2,'alert-danger':status==3}">
			        	{{tips}}
			        </div>
			        
					<div class="row">
						<div class="col-sm-12">
							<table width="100%"
								class="table table-striped table-bordered table-hover dataTable no-footer dtr-inline"
								role="grid" aria-describedby="dataTables-example_info"
								style="width: 100%;">
								<thead>
									<tr role="row">
										<th>车桩编号</th>
										<th>车辆编号</th>
										<th></th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="(item,index) in pileList"
										:class="{gradeA:true,even:index%2==0,odd:index%2==1}"
										role="row">
										<td>{{item.pileCode}}</td>
										<td>{{item.bicycleCode}}</td>
										<td v-if="item.bicycleCode!=null">
											<button type="button" class="btn btn-success" 
												data-toggle="modal" data-target="#cardModal" 
												@click="bicycleDeployFrom(item.pileId,item.bicycleId)"
											>调出</button>
										</td>
										<td v-if="item.bicycleCode==null">
											<button type="button" class="btn btn-danger" 
												data-toggle="modal" data-target="#cardModal" 
												@click="bicycleDeployTo(item.pileId)"
											>调入</button>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				<div class="row">
					<div class="col-sm-4">
						<div class="dataTables_info" id="dataTables-example_info"
							role="status" aria-live="polite">
							每页显示{{pilePageInfo.pageSize}}条，共{{pilePageInfo.total}}条
						</div>
					</div>
					<div class="col-sm-8">
						<div class="dataTables_paginate paging_simple_numbers"
							id="dataTables-example_paginate">
							<ul class="pagination">
								<li
									:class="{paginate_button:true, previous:true, disabled:pilePageInfo.isFirstPage}"
									aria-controls="dataTables-example" tabindex="0"
									id="dataTables-example_previous">
									<a href="javascript:void(0)" @click="listPile(stationId,pilePageInfo.pageNum-1)">上一页</a>
								</li>
			
								<li v-for="item in pilePageInfo.navigatepageNums"
									:class="{paginate_button:true, active:item==pilePageInfo.pageNum}"
									aria-controls="dataTables-example" tabindex="0">
									<a href="javascript:void(0)" @click="listPile(stationId,item)">{{item}}</a>
								</li>
								<li
									:class="{paginate_button:true, next:true, disabled:pilePageInfo.isLastPage}"
									aria-controls="dataTables-example" tabindex="0"
									id="dataTables-example_next">
									<a href="javascript:void(0)" @click="listPile(stationId,pilePageInfo.pageNum+1)">下一页</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
	      	</div>
	    <div class="modal-footer"></div>
	  </div>
	      <!-- /.modal-content -->
	 </div>
	     <!-- /.modal-dialog -->
	 </div>
	 
	<!-- 输入卡号弹出层 -->
	<div class="modal fade" id="cardModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" @click="cleanCardCode">×</button>
                    <h4 class="modal-title" id="myModalLabel">卡号输入</h4>
                </div>
                <div class="modal-body">
					<div v-show="!cardAvailable" class="alert alert-danger">
						卡号错误！
					</div>
					
					<div :class="{'form-group':true, 'has-error':!cardAvailable}">
                        <label class="control-label" for="inputCard">维修调度卡号</label>
                        <input 
						class="form-control" 
						v-model.lazy.trim="card.cardCode"
						id="inputCard" >
                    </div>
					<br>
                </div>
                <div class="modal-footer" >
                    <button type="button" class="btn btn-primary" @click="fromTo">确定</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    
    <!-- 车辆选择框 -->
    <div class="modal fade" id="bicycleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">车辆选择</h4>
                </div>
                <div class="modal-body">
                	<div class="panel panel-default">
			<div class="panel-heading">修理成功车辆</div>
			<!-- /.panel-heading -->
			<div class="panel-body">
				<div id="dataTables-example_wrapper"
					class="dataTables_wrapper form-inline dt-bootstrap no-footer">
					
					<div class="row">
						<div class="col-sm-12">
							<div id="dataTables-example_filter" class="dataTables_filter">
								<label> 车辆编号:
									<input type="text" v-model.trim.lazy="bicycleQueryCondition.bicycleCode"
										class="form-control input-sm"
										aria-controls="dataTables-example">
								</label> 
								<label> 维修日期:
									<input type="date" v-model.trim.lazy="bicycleQueryCondition.operatorTime"
									class="form-control input-sm"
									aria-controls="dataTables-example">
								</label>
								<button type="button" class="btn btn-primary" @click="listBicycle(1)">查询</button>
							</div>
						</div>
					</div>
					
					<div class="row">
						<div class="col-sm-12">
							<table width="100%"
								class="table table-striped table-bordered table-hover dataTable no-footer dtr-inline"
								role="grid" aria-describedby="dataTables-example_info"
								style="width: 100%;">
								<thead>
									<tr role="row">
										<th>车辆编号</th>
										<th>维修日期</th>
										<th></th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="(item,index) in bicycleList"
										:class="{gradeA:true,even:index%2==0,odd:index%2==1}"
										role="row">
										<td>{{item.bicycleCode}}</td>
										<td>{{item.operatorTime}}</td>
										<td>
											<button type="button" class="btn btn-danger" 
												@click="confirm(item.bicycleId)"
											>调入</button>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-4">
							<div class="dataTables_info" id="dataTables-example_info"
								role="status" aria-live="polite">
								每页显示{{bicyclePageInfo.pageSize}}条，共{{bicyclePageInfo.total}}条
							</div>
						</div>
						<div class="col-sm-8">
							<div class="dataTables_paginate paging_simple_numbers"
								id="dataTables-example_paginate">
								<ul class="pagination">
									<li
										:class="{paginate_button:true, previous:true, disabled:bicyclePageInfo.isFirstPage}"
										aria-controls="dataTables-example" tabindex="0"
										id="dataTables-example_previous">
										<a href="javascript:void(0)" @click="listBicycle(bicyclePageInfo.pageNum-1)">上一页</a>
									</li>

									<li v-for="item in bicyclePageInfo.navigatepageNums"
										:class="{paginate_button:true, active:item==bicyclePageInfo.pageNum}"
										aria-controls="dataTables-example" tabindex="0">
										<a href="javascript:void(0)" @click="listBicycle(item)">{{item}}</a>
									</li>
									<li
										:class="{paginate_button:true, next:true, disabled:bicyclePageInfo.isLastPage}"
										aria-controls="dataTables-example" tabindex="0"
										id="dataTables-example_next">
										<a href="javascript:void(0)" @click="listBicycle(bicyclePageInfo.pageNum+1)">下一页</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
                </div>
                <div class="modal-footer">
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
</div>
<script type="text/javascript" src="../js/repair.js"></script>

